<template>
  <div>
    <el-dialog
      title="预览文章"
      :visible="value"
      width="800px"
      @close="CloseDialog"
    >
      <div class="box">
        <!-- 标题模块 -->
        <h2>{{ item.title }}</h2>
        <!-- 副标题 -->
        <div class="subheading">
          <span>{{ formatDate(item.createTime) }}</span>
          <span>{{ item.username }}</span>
          <span class="el-icon-view"></span>
          <span>{{ item.visits }}</span>
        </div>
        <!-- 内容模块 -->
        <div class="content" v-html="item.articleBody"></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import { detail } from '@/api/hmmm/articles.js'
// 引入格式化时间
import dayjs from 'dayjs'
export default {
  props: {
    value: {
      type: Boolean,
      required: true
    },
    list: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      // 回显的内容数据
      item: {}
    }
  },
  methods: {
    // 关闭弹窗
    CloseDialog () {
      this.$emit('input', false)
    },
    // 筛选数据
    async feedback (id) {
      // 筛选出对应的数据
      const data = this.list.filter((item) => item.id === id)
      // console.log(data[0])
      // console.log(this.item)
      // 将筛选的数据赋值给item
      this.item = data[0]
    },
    // 格式化时间
    formatDate (value) {
      return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  margin-top: -10px;
}
.subheading span {
  margin-left: 10px;
  margin-bottom: 10px;
}
.content {
  background: #f5f5f5;
  padding: 10px;
  border-top: 1px dashed #cccccc;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
>
